<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50  fas fa-warehouse"></i>
                    </span>
                    <h3 class="card-label"> 操作区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">                                    
                                    <button class="btn btn-light-primary font-weight-bold  font-size-sm py-3 px-8 mr-2" 
                                    v-permission="{ action: '/jobQuartzSet/default/start', effect: 'display' }"
                                    @click="defaultStartXtQuartzSet">
                                        <span><i class="flaticon-interface-6"></i><span>启动全部</span></span>
                                    </button>
                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">        
                <template slot="empty">
                  <el-empty description="暂无数据"></el-empty>
                </template>
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="jobName" show-overflow-tooltip label="名称"></el-table-column>
                <el-table-column align="left" prop="jobGroup" show-overflow-tooltip label="分组"></el-table-column>                
                <el-table-column align="left" prop="jobStatus" show-overflow-tooltip label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.jobStatus == 'NORMAL'"
                            class="symbol symbol-40 symbol-circle symbol-light-primary">
                            <span class="symbol-label font-size-h8">启动</span>
                        </div>
                        <div v-else-if="scope.row.jobStatus == 'PAUSED'"
                            class="symbol symbol-40 symbol-circle symbol-light-warning">
                            <span class="symbol-label font-size-h8">暂停</span>
                        </div>
                        <div v-else class="symbol symbol-40 symbol-circle symbol-light-warning">
                            <span class="symbol-label font-size-h8">未知</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="cronExpression" show-overflow-tooltip label="运行时间表达式" min-width="150"></el-table-column>
                <el-table-column align="center" prop="desc_"  label="描述" show-overflow-tooltip min-width="150"></el-table-column>
                <el-table-column align="center" label="操作" fixed="left" min-width="330">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <button
                        v-permission="{ action: '/jobQuartzSet/stop', effect: 'disabled' }"
                        @click="doStopXtQuartz(scope.row)" class="btn btn-link" title="暂停">暂 停</button>
                        <button 
                        v-permission="{ action: '/jobQuartzSet/restart', effect: 'disabled' }"
                        @click="reStartXtQuartz(scope.row)" class="btn btn-link" title="恢复">恢 复</button>
                        <button 
                        v-permission="{ action: '/jobQuartzSet/delete', effect: 'disabled' }"
                        @click="delXtQuartz(scope.row)" class="btn btn-link-danger" title="删除">
                            <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                        </button>
                        <button
                        v-permission="{ action: '/jobQuartzSet/default/start', effect: 'disabled' }"
                        @click="startXtQuartz(scope.row)" class="btn btn-link" title="执行">执 行</button>
                        <button 
                        v-permission="{ action: '/jobQuartzSet/onesecond', effect: 'disabled' }"
                        @click="oneSecondXtQuartz(scope.row)" class="btn btn-link" title="一秒一次">一秒一次</button>
                        <button 
                        v-permission="{ action: '/jobQuartzSet/fiveseconds', effect: 'disabled' }"
                        @click="fiveSecondsXtQuartz(scope.row)" class="btn btn-link" title="五秒一次">五秒一次</button>                  
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {},
            pickerOptions: {
                // disabledDate(time) {//范围不可选
                //     return time.getTime() > Date.now();
                // },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, 
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, 
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }],
            },
            dataList: [],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "执行任务" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_JOB_API + "/jobQuartzSet/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },

        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
        },
        defaultStartXtQuartzSet() { 
            this.$confirm("确认启动所有调度任务?", "提示", { type: "warning", }).then(() => {
                // 根据后台想要的参数格式选择
                apiUtil.get(process.env.VUE_APP_JOB_API + "/jobQuartzSet/default/start").then(data => {
                    if (data.data.success) {
                        handleAlert("启动成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("启动失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        doStopXtQuartz(row){//暂停
            this.$confirm("确定暂停该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/jobQuartzSet/stop",params).then(data => {
                    if (data.data.success) {
                        handleAlert("暂停成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("状态失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;      
        },
        reStartXtQuartz(row){
            this.$confirm("确定重启该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/jobQuartzSet/restart",params).then(data => {
                    if (data.data.success) {
                        handleAlert("重启成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("重启失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;   
        },
        delXtQuartz(row){            
            this.$confirm("确定删除该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.delete(process.env.VUE_APP_JOB_API + "/jobQuartzSet/delete",params).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;   
        },        
        startXtQuartz(row){
            this.$confirm("确定要立即执行一次该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/jobQuartzSet/start",params).then(data => {
                    if (data.data.success) {
                        handleAlert("执行成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("执行失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;  
        },
        oneSecondXtQuartz(row){
            this.$confirm("确定要一秒执行一次该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/jobQuartzSet/onesecond",params).then(data => {
                    if (data.data.success) {
                        handleAlert("执行成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("执行失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;  
        },
        fiveSecondsXtQuartz(row){
            this.$confirm("确定要五秒执行一次该任务?", "提示", { type: "warning", }).then(() => {
                let params = {jobGroup:row.jobGroup,jobName:row.jobName};
                apiUtil.get(process.env.VUE_APP_JOB_API + "/jobQuartzSet/fiveseconds",params).then(data => {
                    if (data.data.success) {
                        handleAlert("执行成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("执行失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;  
        }
    }
};
</script>